<script setup lang="ts">
import splitpane, { ContextProps } from "@/components/ReSplitPane";
import { reactive } from "vue";
import { useBreakpointQuery } from "@/utils/device";
import TradePanel from "./TradePanel.vue";
import TradePositionPanel from "./components/TradePositionPanel.vue";
import TradePositionAnalysisPanel from "./components/TradePositionAnalysisPanel.vue";

defineOptions({
  name: "trade-index"
});

const settingTB: ContextProps = reactive({
  minPercent: 15,
  defaultPercent: 50,
  split: "horizontal"
});

const { isSmUp } = useBreakpointQuery();
</script>

<template>
  <div class="h-[calc(100vh-120px)] bg-white">
    <div class="flex h-full">
      <div
        class="h-full max-w-[640px] min-w-[360px] flex-1 border-r-3 border-gray-100 sm:max-w-[500px] sm:flex-[1_1_38.2%]"
      >
        <trade-panel />
      </div>
      <div v-if="isSmUp()" class="h-full flex-[2_1_61.8%]">
        <splitpane :splitSet="settingTB">
          <template #paneL>
            <trade-position-panel />
          </template>
          <template #paneR>
            <trade-position-analysis-panel />
          </template>
        </splitpane>
      </div>
    </div>
  </div>
</template>
